<template>
	<div class="middle-box-container">
		<div class="middle-box-header margin-top-20" style="margin-bottom: 0;">
			<div class="middle-box-header-item">
				<span class="middle-box-header-item-label">生产品种</span>
				<span class="middle-box-header-item-val">
					<countTo :start-val="oldChartData.productCount || 0" :end-val="chartData.productCount || 0" :duration="3000"></countTo>
				</span>
			</div>
			<div class="middle-box-header-item">
				<span class="middle-box-header-item-label">当班产量(kg)</span>
				<span class="middle-box-header-item-val">
					<countTo :decimals="1" :start-val="oldChartData.shiftQty || 0" :end-val="chartData.shiftQty || 0" :duration="3000"></countTo>
				</span>
			</div>
			<div class="middle-box-header-item">
				<span class="middle-box-header-item-label">当班能耗(kw·h)</span>
				<span class="middle-box-header-item-val">
					<countTo :decimals="1" :start-val="oldChartData.shiftEnergy || 0" :end-val="chartData.shiftEnergy || 0" :duration="3000"></countTo>
				</span>
			</div>
			<!--<div class="middle-box-header-item">
				<span class="middle-box-header-item-label">当月能耗(kw·h)</span>
				<span class="middle-box-header-item-val">
					<countTo :decimals="1" :start-val="oldChartData.monthTotalEnergy || 0" :end-val="chartData.monthTotalEnergy || 0" :duration="3000"></countTo>
				</span>
			</div>-->
		</div>
		<div style="width: 100%;height: 340px;">
			<chart
				:chart-val="chartData"
			></chart>
		</div>
		<div class="middle-box-header">
			<div class="middle-box-header-item" style="width: 76px;">
				<span class="middle-box-header-item-label" style="color: #54d3d8;">总机台</span>
				<span class="middle-box-header-item-val" style="color: #54d3d8;">
					<countTo :start-val="oldChartData.machineCount || 0" :end-val="chartData.machineCount || 0" :duration="3000"></countTo>
				</span>
			</div>
			<div
				v-for="(item, index) in chartData.stateCountList || []"
				:key="index"
				class="middle-box-header-item"
				style="width: 76px;"
			>
				<span class="middle-box-header-item-label" :style="{color: item.color}">{{ item.name }}</span>
				<span class="middle-box-header-item-val" :style="{color: item.color}">
					<countTo :start-val="item.count || 0" :end-val="item.count || 0" :duration="3000"></countTo>
				</span>
			</div>
		</div>
	</div>
</template>

<script>
    import { reportProductionHomeDataAll } from '../../../../../api/production/kanBan';
    import countTo from 'vue-count-to';
    import chart from './chart-2';
    export default {
        name: 'MiddleChart',
        components: {
            chart,
            countTo
        },
        props: {
            workshopId: {
                type: Number,
                default: null
            },
            refreshData: {
                type: [Number, String],
                default: ''
            },
            processCode: {
                type: String,
                default: 'XS'
            }
        },
        data() {
            return {
                /* stateList: [
                    { id: 1, name: '运行', color: '#19be6b', icon: '', count: 0 },
                    { id: 0, name: '待机', color: '#2d8cf0', icon: '', count: 0 },
                    { id: -1, name: '关机', color: '#808695', icon: '', count: 0 },
                    { id: 2, name: '机台断网', color: '#a97cf6', icon: '', count: 0 },
                    { id: 3, name: '电表断网', color: '#ff9900', icon: '', count: 0 },
                    { id: 4, name: '操作错误', color: '#F95457', icon: '', count: 0 }
                ],*/
                oldChartData: {
                    stopMachineCount: 0,
                    offLineMachineCount: 0,
                    openMachineCount: 0,
                    machineCount: 0,
                    shiftEnergy: 0,
                    productCount: 0,
                    monthTotalEnergy: 0
                },
                chartData: {},
                example: null,
                borderColor: '#c5c8ce'
            };
        },
        methods: {
            getDataRequest() {
                if (!this.workshopId) return false;
                return reportProductionHomeDataAll().then(res => {
                    if (res.data.status === 200) {
                        this.chartData = res.data.res || {};
                        console.log('12311', this.chartData);
                    }
                });
            }
        },
        mounted() {
        },
        watch: {
            refreshData: {
                handler() {
                    this.getDataRequest();
                },
                deep: true,
                immediate: true
            },
            chartData: {
                handler(newVal, oldVal) {
                    this.oldChartData = JSON.parse(JSON.stringify(oldVal));
                },
                deep: true
            }
        }
    };
</script>

<style scoped lang="scss">
    .middle-box-container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .middle-box-header {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
            .middle-box-header-item {
                width: 160px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin: 0 4px;
                .middle-box-header-item-label {
                    width: 100%;
                    font-size: 14px;
                    text-align: center;
                    color: #c5c8ce;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin-bottom: 4px;
                }
                .middle-box-header-item-val {
                    width: 100%;
                    height: 38px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: #54d3d8;
                    font-size: 20px;
                    font-weight: 700;
                    background: #100F37;
                    border: solid 2px #124985;
                    border-radius: 4px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
        .circle-row {
            display: flex;
            justify-content: center;
            align-items: center;
            .circle-box {
                width: 117px;
                height: 109px;
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                .circle-box-txt {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    .circle-box-txt-label {
                        font-size: 12px;
                        color: #c5c8ce;
                    }
                    .circle-box-txt-val {
                        font-size: 16px;
                        font-weight: 700;
                        color: #54d3d8;
                    }
                }
                .circle-box-icon {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    background: url("../../../../../assets/images/workshop-kan-ban/circle.png") no-repeat center;
                    //background-size: 100% 100%;
                }
                .left-direction {
                    animation: leftGear 2s infinite linear;

                }
                .right-direction {
                    animation: rightGear 2s infinite linear;
                }
            }
        }
    }
    @keyframes leftGear {
        0% {
            transform:rotate(0deg);
        }
        50% {
            transform:rotate(180deg);
        }
        100% {
            transform:rotate(360deg);
        }
    }
    @keyframes rightGear {
        0% {
            transform:rotate(360deg);
        }
        50% {
            transform:rotate(180deg);
        }
        100% {
            transform:rotate(0deg);
        }
    }
</style>
